<script lang="ts" setup>
	import { CloseOutlined, PictureOutlined, LinkOutlined, SmileOutlined } from "@ant-design/icons-vue"
	import { onBeforeUnmount, ref, shallowRef, watch } from "vue"
	import { config } from "@/config/axios/config"
	import { message, type UploadProps, type UploadChangeParam } from 'ant-design-vue';
	import '@wangeditor/editor/dist/css/style.css' // 引入 css
	import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
	import type { IDomEditor } from '@wangeditor/editor'
	const emit = defineEmits(['change','getHeight'])
	const props = defineProps(['placeholder','type'])
	const editorRef = shallowRef()
	let textLength = ref(0)
	const toolbarConfig = {
		toolbarKeys: ['emotion', 'insertLink'],
		modalAppendToBody: true
	}
	let editorConfig = {
		placeholder: props.placeholder
	}
	watch(() => props.placeholder, (newValue, oldValue) => {
		var elements = document.getElementsByClassName('w-e-text-placeholder');
		for (var i = 0; i < elements.length; i++) {
			elements[i].innerHTML = newValue;
		}
	});
	onBeforeUnmount(() => {
		const editor = editorRef.value
		if (editor == null) return
		editor.destroy()
	})
	const handleCreated = (editor : any) => {
		editor.on('modalOrPanelShow', (modalOrPanel : any) => {
			const { $elem } = modalOrPanel
			let el = $elem[0]
			var boxList = document.getElementsByClassName('comment-top');
			console.log(boxList)
			if(props.type=='comment'){
				if(modalOrPanel.type=='dropPanel'){
					el.style.marginTop="40px"
				}
				if (boxList[0] && modalOrPanel.type=='modal') {
					boxList[0].appendChild(el);
				}
			}else{
				if(modalOrPanel.type=='dropPanel'){
					el.style.marginTop="-390px"
				}else{
					el.style.top="-170px"
					el.style.left="70px"
				}
				if (boxList[1] && modalOrPanel.type=='modal') {
					boxList[1].appendChild(el);
				}
			}
		})
		editorRef.value = editor
	}
	let mode = ref<string>('simple')
	//图片上传
	const fileList = ref<UploadProps['fileList']>([]);
	let comment = ref('')
	let commentImg = ref("")
	const handleChange = (info : UploadChangeParam) => {
		if (info.file.status === 'done') {
			let res = info.file.response
			if (res.code == 1) {
				commentImg.value = res.data
				emit('getHeight', 321)
			}
		} else if (info.file.status === 'error') {
			message.error(`上传失败`);
		}
	};
	
	const closeCommentImg = () => {
		emit('getHeight', 141)
		commentImg.value = ""
		fileList.value = []
	}
	const editorChange = (editor : IDomEditor) => {
		textLength.value = editorRef.value.getText().length
	}
	const submit = () => {
		if (!textLength.value) {
			message.error(`内容不能为空`);
			return false
		}
		if (textLength.value >= 1500) {
			message.error(`内容过多`);
			return false
		}

		let data = {
			content: comment.value,
			img: commentImg.value
		}
		editorRef.value.clear()
		commentImg.value = ""
		emit('change', data)
	}
</script>

<template>
	<div class="comment-box">
		<div class="comment-top">
			<Editor v-model="comment" class="editor" :defaultConfig="editorConfig" :mode="mode" @onChange="editorChange"
				@onCreated="handleCreated" />
			<div class="img-box" v-if="commentImg">
				<div class="close" @click="closeCommentImg">
					<CloseOutlined />
				</div>
				<img :src="commentImg" class="img" />
			</div>
			<Toolbar :editor="editorRef" :defaultConfig="toolbarConfig" :mode="mode" class="toolbar"
				@mouseenter="editorRef.focus()" />
		</div>
		<div class="comment-bottom">
			<a-upload v-model:file-list="fileList" name="file" :action="config.baseUrl+'/api/uploadFile'" :maxCount="1"
				:showUploadList="false" @change="handleChange" class="upload">
				<picture-outlined class="icon img-icon" />
			</a-upload>
			<smile-outlined class="icon" />
			<link-outlined class="icon" />
			<div class="tips" :class="{'error':textLength>=1500}">{{textLength}}/1500</div>
			<a-button type="primary" class="submit" :class="{'disabled':!textLength || textLength>=1500}"
				@click="submit">
				评论
			</a-button>
		</div>
	</div>
</template>

<style lang="scss" scoped>
	.comment-box {
		background-color: #fff;

		.comment-top {
			position: relative;

			.editor ::v-deep .w-e-text-container {
				background-color: #f9f9f9;
				border-radius: 5px;
			}

			.toolbar {
				padding: 10px 0 0 40px;
			}

			.toolbar ::v-deep .w-e-menu-tooltip-v5 {
				opacity: 0;
			}

			.toolbar ::v-deep .w-e-bar {
				background-color: transparent;
			}

			.img-box {
				position: relative;
				margin-top: 20px;

				.close {
					width: 26px;
					height: 26px;
					display: flex;
					align-items: center;
					justify-content: center;
					position: absolute;
					color: #fff;
					border-radius: 50%;
					background-color: rgba(0, 0, 0, 0.4);
					left: 130px;
					top: 5px;
					cursor: pointer;
				}

				.img {
					width: 160px;
					height: 160px;
				}
			}
		}

		.comment-bottom {
			font-size: 18px;
			display: flex;
			align-items: center;
			padding: 0 16px 35px 16px;
			margin-top: -35px;

			.upload {
				line-height: inherit;
			}

			.icon {
				cursor: pointer;
				margin-right: 24px;
			}

			.img-icon {
				position: relative;
				z-index: 2;
				font-size: 18px;
				top: 0;
			}

			.tips {
				margin-left: auto;
				font-size: 12px;
				color: #7f7f7f;
			}

			.error {
				color: red;
			}

			.submit {
				width: 75px;
				height: 36px;
				border-radius: 2px;
				margin-left: 16px;
			}

			.disabled {
				opacity: 0.65;
				cursor: default;
			}
		}
	}
</style>